import React from 'react';
import { Checkbox, Tag } from 'antd';
import InnerHref from '../../../util/InnerHref';
import { routerShape } from 'react-router';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { WeaLocaleProvider, WeaTag } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

@inject('coworkMainStore')
@observer
export default class Item extends React.Component {
  static contextTypes = {
    router: routerShape,
  };
  constructor(props) {
    super(props);
    this.state = {
      important: false,
    };
  }

  handleClick = () => {
    const { coworkMainStore, coworkid, important } = this.props;
    if (important === '0') {
      coworkMainStore.markItemAsType({
        coworkids: coworkid,
        type: 'important',
      });
    } else if (important === '1') {
      coworkMainStore.markItemAsType({ coworkids: coworkid, type: 'normal' });
    }
  };

  render() {
    let labels = this.props.labelBycoworkList;
    let { coworkMainStore, coworkid, choose } = this.props;
    let checkIds = toJS(coworkMainStore.leftList.checkIds);
    let checked = checkIds.some(id => coworkid == id);
    return (
      <li className={`wea-cowork-item ${choose ? 'cur' : ''}`}>
        <Checkbox
          ecId={`${
            (this && this.props && this.props.ecId) || ''
          }_Checkbox@iyl8dg`}
          onChange={this.check}
          checked={checked}
        />
        <span
          onClick={this.chooseCowork}
          className="item-title"
          title={this.props.coworkName}
        >
          {this.props.approvalAtatus === '0' ? (
            ''
          ) : (
            <span className="item-prefix">【{getLabel(2242, '待审批')}】</span>
          )}
          <span
            className={
              this.props.isnew === '0'
                ? 'item-message-notNew'
                : 'item-message-isNew'
            }
          >
            {this.props.coworkName}
          </span>
          {this.props.isTop === '0' ? (
            ''
          ) : (
            <Tag
              ecId={`${
                (this && this.props && this.props.ecId) || ''
              }_Tag@e4g6sl`}
              className="cowork-top"
            >
              Top
            </Tag>
          )}
        </span>
        <span
          onClick={this.handleClick}
          className={
            this.props.important === '0'
              ? 'icon-coms-Collection'
              : 'icon-coms-Collection2'
          }
        />
        <div className="wea-tag-container">
          {labels &&
            labels.map((label, index) => (
              <WeaTag
                ecId={`${
                  (this && this.props && this.props.ecId) || ''
                }_WeaTag@n5yidi@${index}`}
                className="special-tag"
                closable
                key={label.id}
                color={label.labelColor}
                title={label.labelName}
                afterClose={() => this.deleteTag(label)}
              >
                {label.labelName}
              </WeaTag>
            ))}
        </div>
      </li>
    );
  }

  chooseCowork = () => {
    let { router } = this.context;
    if (router) {
      router.push(InnerHref.cowork(this.props.coworkid));
    }
  };

  check = (e) => {
    const { coworkMainStore } = this.props;
    coworkMainStore.checkLeftList(this.props.coworkid, e);
  };
  deleteTag = (label) => {
    const { coworkMainStore } = this.props;
    coworkMainStore.deleteCoworkLabels(label, this.props.coworkid);
  };
}
